<script setup lang="ts">
import { ref } from 'vue'
import hotTopic from './components/hot-topic.vue'
import searchBox from '@/components/search-box.vue'

const inputRef = ref<any>(null)
const searchHistory = ref([
  { id: 1, name: '杨柯' },
])

// 传递热门话题
const topicData = ref([
  { id: 1, ranking: '1', title: '#毕业季', quantity: 1689, heat: '20w' },
  { id: 2, ranking: '2', title: '#校园生活', quantity: 1583, heat: '20w' },
  { id: 3, ranking: '3', title: '#校园生活', quantity: 895, heat: '20w' },
])

// 回车时触发搜索
const onEnterKey = (keyword: string) => {
  if (!keyword) return;

  // 1. 检查是否已存在相同关键词
  const existingIndex = searchHistory.value.findIndex(item => item.name === keyword);

  if (existingIndex >= 0) {
    // 2. 如果已存在，先移除旧位置的数据
    const [existingItem] = searchHistory.value.splice(existingIndex, 1);
    // 3. 再添加到数组开头
    searchHistory.value.unshift(existingItem);
  } else {
    // 4. 如果不存在，直接添加到开头
    searchHistory.value.unshift({
      id: Date.now(),
      name: keyword
    });
  }

  // 跳转到搜索结果页
  uni.navigateTo({
    url: `/pages-sub/search/search-details?keyword=${encodeURIComponent(keyword)}`,
  })
};

// 清空历史记录
const onClearOut = () => {
  searchHistory.value = []
}

// 点击历史记录项时填充到搜索框
const onHistoryItemClick = (keyword: string) => {
  if (inputRef.value) {
    inputRef.value.setInputValue(keyword)
    inputRef.value.focus()
  }
}

// 点击热门话题
const handTopic = () => {
  uni.navigateTo({
    url: '/pages-sub/search/topic-details',
  })
}

// 取消按钮 - 返回上一页
const onCancel = () => {
  uni.navigateBack()
}
</script>

<template>
  <view class="search">
    <!-- 搜索框 -->
    <searchBox ref="inputRef" @enterKey="onEnterKey" @cancel="onCancel" />

    <!-- 历史搜索 搜索记录 -->
    <view class="search-record">
      <!-- 历史搜索 -->
      <view class="search-record-text">
        <h1 class="search-record-text-h1">历史搜索</h1>
        <uni-icons @click="onClearOut" custom-prefix="iconfont" color="#666767" type="icon-lajitong"
          size="22"></uni-icons>
      </view>
      <!-- 搜索记录 -->
      <view class="search-record-content">
        <view class="search-record-item" v-for="item in searchHistory" :key="item.id"
          @click="onHistoryItemClick(item.name)">
          <text class="search-record-content-text">{{ item.name }}</text>
        </view>
      </view>
      <!-- 热门话题 -->
      <view @click="handTopic">
        <hotTopic :hotTopicData="topicData" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.search {

  // 历史搜索样式
  &-record {
    margin-top: 30rpx;

    &-text {
      display: flex;
      justify-content: space-between;

      &-h1 {
        font-size: 38rpx;
      }
    }

    &-content {
      margin-top: 30rpx;
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;
    }

    &-item {
      margin-bottom: 20rpx;
    }

    &-content-text {
      padding: 10rpx 20rpx;
      background-color: $uni-bg-color;
      font-size: 26rpx;
      border-radius: 30rpx;
      /* 改为圆角矩形 */
      white-space: nowrap;
      /* 不换行 */
      display: inline-block;
    }
  }
}
</style>